import React,{Component} from "react";
import './css/page3.css'

export default class Page2 extends Component {
    constructor(){
        super();
        this.state={
            totalnum:0,
            totalprice:0,
            checkedAll:false,
            list:[{id:1,name:"商品一",price:100,num:1,checked:false},
            {id:2,name:"商品二",price:100,num:2,checked:false},
            {id:3,name:"商品三",price:100,num:3,checked:false},
            {id:4,name:"商品四",price:100,num:4,checked:false}
        ]
        }
    }
    calc(id,num){//这里增减数量
        this.setState({
            list:this.state.list.map((item)=>{
                if(item.id===id){
                    item.num+=num
                }
                return item
            })
        },()=>{this.totalnumAndPrice()})
    }
    
    delid(id){
        this.setState({
            list:this.state.list.filter(item=>item.id!==id)
        },()=>{this.checkCheckAll()})
    }
    setcheckall(checked){//全选
        this.setState({
            checkedAll:checked,
            list:this.state.list.map(info=>{
                info.checked= checked
                return info
            })
        },()=>{this.checkCheckAll()})
    }
    setcheckOne(item,checked){//单选
        this.setState({
            list:this.state.list.map(info=>{
                if(info.id===item.id){
                    info.checked=checked
                }
                return info
            })
        },()=>{this.checkCheckAll()})
    }
    checkCheckAll(){//单选反选
        this.setState({
            checkedAll:this.state.list.length?
            this.state.list.every((item)=>item.checked):false
        },()=>{this.totalnumAndPrice()})
    }
    totalnumAndPrice(){
        let num =0 ;
        let price = 0;
        let allcheck = this.state.list.filter(item=>item.checked);
        console.log(allcheck);
        if(allcheck.length){
            allcheck.forEach(ele => {
                num += ele.num;
                price+=ele.price*ele.num
            });
        }
        this.setState({
           
            totalnum:num,
            totalprice:price
        })
    }
  render() {
    return (
      <>
      <div>Shoppingcar</div>
      <div className="table">
        <div className="tr">
        <div className="td">
            <div className="checkall">
                <input type='checkbox'
                checked={this.state.checkedAll}
                onChange={(e)=>{this.setcheckall(e.target.checked)}}
                />全选
            </div>
                <div>商品名称</div>
                <div>商品价格</div>
                <div>商品数量</div>
                <div>商品小计</div>
                <div>操作</div>
        </div>
        {this.state.list.map(item=>
            <div className="td" key={item.id}>
            <div className="checkall">
            <input
                  type="checkbox"
                  checked={item.checked}
                onChange={(e)=>{this.setcheckOne(item,e.target.checked)}}
                />
            </div>
                <div>{item.name}</div>
                <div>{item.price}</div>
                <div>
                    {item.num>1?<button className="reduce"  onClick={()=>{
                        this.calc(item.id,-1)
                    }}>-</button>:<button>-</button>}
                    <input  type='text'//num值
                     value={item.num} onChange={()=>{}}
                     />
                    <button className="add" onClick={()=>{
                        this.calc(item.id,1)
                    }}>+</button>
                </div>
                <div>{(item.price*item.num).toFixed(2)}</div>
                <div onClick={()=>{this.delid(item.id)}}>删除</div>
        </div>)}
        <div className="td">
                <div></div>
                <div></div>
                <div>商品总量{(this.state.totalnum).toFixed(2)}</div>
                <div>商品合计{(this.state.totalprice).toFixed(2)}</div>
                <div></div>
        </div>
        </div>
      </div>
      </>
    )
  }
}

